// Learn TypeScript:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html

const {ccclass, property} = cc._decorator;

@ccclass 
export default class button extends cc.Component { 
 
    onLoad() {

        this.node.on(cc.Node.EventType.TOUCH_START, this.touchStart, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this.touchEnd, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.touchCancel, this);

    }

    show(){
        this.node.stopAllActions();
        this.node.scale = 0;
        this.node.angle = 0;
        cc.tween(this.node)
            .parallel(
                cc.tween()
                    .to(7/30, { scaleX: 1.15, scaleY: 1})
                    .to(4/30, {scale: 1}),
                cc.tween()
                    .to(1/30,{angle: -5})
                    .to(3/30, {angle: 0})
                    .to(1/30,{angle: 5})
                    .to(1/30,{angle: 0})
                    .to(1/30,{angle: -5})
                    .to(1/30,{angle: 0})
                    .to(2/30,{angle: -1})
                    .to(2/30,{angle: 0})
            )
            .call(()=>{
                cc.tween(this.node)
                    .to(20/30, {scaleX: 1.04, scaleY: 0.94}, {easing: 'sineIn'})
                    .to(20/30, {scaleX: 1, scaleY: 1}, {easing: 'sineIn'})
                    .union()
                    .repeatForever()   
                    .start();
            })
            .start()   
    }

 
    touchStart(){
        this.node.stopAllActions();
        cc.tween(this.node)
            .parallel(
                cc.tween()
                    .to(1/30, {opacity: 255 * 0.5}),
                cc.tween()
                    .to(3/30, {scale: 0.8})
                    .to(3/30, {scale: 0.9})
                    .to(3/30, {scale: 0.82})
                    .to(3/30, {scale: 0.88})
                    .to(3/30, {scale: 0.84})
                    .to(3/30, {scale: 0.86})
                    .to(3/30, {scale: 0.85})
            )
            .call(()=>{
                cc.tween(this.node)
                    .to(15/30, {scaleX:0.88}, {easing: 'sineInOut'})
                    .to(15/30, {scaleX: 0.82}, {easing: 'sineInOut'})
                    .to(15/30, {scaleX: 0.88}, {easing: 'sineInOut'})
                    .to(15/30, {scaleX: 0.82}, {easing: 'sineInOut'})
                    .union()
                    .repeatForever()   
                    .start();
            })
            .start(); 
    }


    touchEnd(){
        this.node.stopAllActions();
        cc.tween(this.node)
        .parallel(
            cc.tween()
                .to(1/30, {opacity: 255}),
            cc.tween()
                .to(3/30, {scale: 1.2})
                .to(3/30, {scale: 0.9})
                .to(3/30, {scale: 1.15})
                .to(3/30, {scale: 0.95})
                .to(3/30, {scale: 1.1})
                .to(3/30, {scale: 1})
        )
        .call(()=>{
            cc.tween(this.node)
                .to(20/30, {scaleX: 1.04, scaleY: 0.94}, {easing: 'sineIn'})
                .to(20/30, {scaleX: 1, scaleY: 1}, {easing: 'sineIn'})
                .union()
                .repeatForever()   
                .start();
        })
        .start(); 
    }


    touchCancel(){
        this.node.stopAllActions();
        cc.tween(this.node)
            .parallel(
                cc.tween()
                    .to(1/30, {opacity: 255}),
                cc.tween()
                    .to(3/30, {scale: 1.2})
                    .to(3/30, {scale: 0.9})
                    .to(3/30, {scale: 1.15})
                    .to(3/30, {scale: 0.95})
                    .to(3/30, {scale: 1.1})
                    .to(3/30, {scale: 1})
            )
            .call(()=>{
                cc.tween(this.node)
                    .to(20/30, {scaleX: 1.04, scaleY: 0.94}, {easing: 'sineIn'})
                    .to(20/30, {scaleX: 1, scaleY: 1}, {easing: 'sineIn'})
                    .union()
                    .repeatForever()   
                    .start();
            })
            .start(); 
    }
 
}
